import React, { Component } from 'react'

import { Card, Button, Table } from 'antd';
import LinkButton from '../../components/link-button'
import { reqCategorys } from '../../api'

/**
 * 商品分类 路由
 */
class Category extends Component {
    constructor(props) {
        super(props);
        this.state = {
            categorys:[]
        }
    }

    /**
     * 初始化所有列的属性
     */
    initColumns = () => {
        this.columns = [
            {
                title: '分类名称',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '操作',
                width: '300px',
                render: () => (
                    <span>
                        <LinkButton>修改分类</LinkButton>
                        <LinkButton>查看子分类</LinkButton>
                    </span>
                )
            },

        ];
    }

    componentWillMount() {
        this.initColumns()
    }

    // 发请求
    componentDidMount(){
        reqCategorys()
    }


    render() {
        const title = "一级分类列表"

        const extra = (
            <Button type="primary" icon="plus" >添加</Button>
        )

        return (
            <Card title={title} extra={extra}>
                <Table
                    bordered
                    rowKey='_id'
                    dataSource={this.state.categorys} columns={this.columns} />
            </Card>
        );
    }
}

export default Category;